<template>
  <div id="info">
    <p></p>
    <div class="mem_tit">添加商品分类</div>
    <div class="tishi" style="margin-bottom: 15px;"><h3>添加{{typeLevel}}级分类</h3></div>
    <form @submit.prevent="addCategory">
      <div class="form-group">
        <label for="newsTitle">输入标题：</label>
        <input type="text" v-model="name" @blur="toCheckName" />
        <span class="error-message" :style="nameStyle">{{ checkName }}</span>
      </div>
      <div>
        <label for="content">一级分类</label>
        <select v-model="type1Id" @change="getTypes2">
          <option value="0" selected>全部</option>
          <option v-for="type1 in types1" :key="type1.id" :value="type1.id">
            {{ type1.name }}
          </option>
        </select>
      </div>
      <div v-if="!ishide2">
        <label for="content">二级分类</label>
        <select v-model="type2Id" @change="getTypes3">
          <option value="0" selected>全部</option>
          <option v-for="type2 in types2" :key="type2.id" :value="type2.id">
            {{ type2.name }}
          </option>
        </select>
      </div>

      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
function checkNull(val) {
  return val == null || val === "" || val.includes(" ");
}

export default {
  el: "#info",
  data() {
    return {
      name: "",
      types1: [],
      types2: [],
      ishide2: true,
      type2Id: 0,
      type1Id: 0,
      type: 0,
      nameStyle: { color: "red" },
      checkName: "",
      parentId: 0,
      typeLevel:"一",
    };
  },
  methods: {
    getTypes1() {
      console.log("获取所有一级分类");
      this.$axios({
        url: "/api/category/getTypes1",
        method: "post",
      })
        .then((rs) => {
          console.log(rs.data.list);
          this.types1 = rs.data.list;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    addCategory() {
      if (this.nameStyle.color != "green") {
        this.toCheckName();
        return false;
      }
      this.$axios({
        method: "post",
        url: "/api/category/addCategory",
        data: {
          name: this.name,
          type: this.type + 1,
          parentId: this.parentId,
        },
      })
        .then((rs) => {
          alert(rs.data.result);
          if (rs.data.result === "添加成功") {
            this.$router.push("/managerIndex/categoryPage");
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    toCheckName() {
      if (checkNull(this.name)) {
        this.checkName = "分类名不能为空";
        return false;
      }
      this.$axios({
        url: "/api/category/checkName",
        method: "post",
        data: {
          name: this.name,
          type: this.type + 1,
        },
      })
        .then((rs) => {
          if (rs.data.result === "exist") {
            this.checkName = "该分类名已经存在，请重新输入";
          } else {
            this.checkName = "分类名输入正确";
            this.nameStyle.color = "green";
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    getTypes2() {
      console.log("获取所有二级级分类");
      if (this.type1Id == 0) {
        this.parentId = 0;
        this.ishide2 = true;
        this.typeLevel="一";
        this.toCheckName();
        return false;
      }
      if (this.type < 2) {
        this.type = 1;
      }
      this.parentId = this.type1Id;
      this.$axios({
        method: "post",
        data: {
          id: this.type1Id,
        },
        url: "/api/category/getTypes2",
      })
        .then((rs) => {
          console.log(rs.data.list);
          this.ishide2 = false;
          this.type2Id = 0;
          this.types2 = rs.data.list;
          this.toCheckName();
          this.typeLevel="二";
        })
        .catch((error) => {
          console.error(error);
        });
    },
    getTypes3() {
    
      if (this.type2Id == 0) {
        this.parentId = this.type1Id;
        this.type = 1;
        this.toCheckName();
        this.typeLevel="二";
        return false;
      }
      this.typeLevel="三";
      this.type = 2;
      this.parentId = this.type2Id;
      this.toCheckName();
    },
  },
  mounted() {
    this.getTypes1();
  },
};
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

#info {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.mem_tit {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

input[type="text"],
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  font-size: 14px;
}

@media (max-width: 768px) {
  #info {
    margin: 20px;
  }

  .mem_tit {
    font-size: 20px;
  }

  input[type="text"],
  select,
  button {
    font-size: 14px;
  }
}

input[type="text"]:focus,
select:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  transition: border-color 0.3s, box-shadow 0.3s;
}

button {
  transition: background-color 0.3s;
}

div.v-if {
  transition: opacity 0.5s ease-in-out;
}

div.v-if:not(:first-child) {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

div.v-if:first-child {
  opacity: 1;
  height: auto;
}
</style>
